<!DOCTYPE html>
<html lang="en">
<head>
  {% load static %}
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static './layui/css/layui.css' %}">
    <script src="{% static './layui/layui.js' %}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form class="layui-form" action="" style="margin-top: 30px">
            <div class="layui-form-item">
                  <label class="layui-form-label">标题</label>
                  <div class="layui-input-inline">
                    <input type="hidden" name="id" value="{{id}}">
                    <input type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" value="{{title}}">
                  </div>
            </div>

            <div class="layui-form-item">
                  <label class="layui-form-label">片上传图</label>
                  <div class="layui-input-inline">

                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test1">上传图片</button>
                      <div class="layui-upload-list">
                        <img class="layui-upload-img" id="showImg" height="200px" width="200px" src="{{imgSrc}}">
                        <p id="demoText"></p>
                      </div>
                    </div>

                  </div>
            </div>


            <div class="layui-form-item">
                  <label class="layui-form-label">阅读数量</label>
                  <div class="layui-input-inline">
                    <input type="text" name="reading" lay-verify="required"
                           value="{{reading}}"
                           placeholder="请输入阅读数量" autocomplete="off" class="layui-input">
                  </div>
            </div>

            <div class="layui-form-item">
                  <label class="layui-form-label">收藏数量</label>
                  <div class="layui-input-inline">
                    <input type="text" name="collection"
                           value="{{collection}}"
                           lay-verify="required" placeholder="请输入收藏数量" autocomplete="off" class="layui-input">
                  </div>
            </div>

            <div class="layui-form-item">
                      <label class="layui-form-label">作者</label>
                      <div class="layui-input-inline">
                        <input type="text" name="author"
                               value="{{author}}"
                               lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
                      </div>
            </div>

            <div class="layui-form-item">

              <div class="layui-inline">
                <label class="layui-form-label">录入时间</label>
                <div class="layui-input-inline">
                  <input type="text" name="dateTime"
                         value="{{dateTime}}"
                         id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
              </div>

            </div>


            <div class="layui-form-item">
              <label class="layui-form-label">文章内容</label>
              <div class="layui-input-block">
                <textarea class="layui-textarea" id="LAY_demo1" style="display: none">
                    {{content}}
                </textarea>
<!--                <div class="site-demo-button" style="margin-top: 20px;">-->
<!--                  <button class="layui-btn site-demo-layedit" data-type="content">获取编辑器内容</button>-->
<!--                  <button class="layui-btn site-demo-layedit" data-type="text">获取编辑器纯文本内容</button>-->
<!--                  <button class="layui-btn site-demo-layedit" data-type="selection">获取编辑器选中内容</button>-->
<!--                </div>-->
              </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
    </form>
</body>
<script>
layui.use(['form', 'laydate', 'upload','layedit'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,upload = layui.upload
  ,layedit = layui.layedit
  ,laydate = layui.laydate;

  //构建一个默认的编辑器
  var index = layedit.build('LAY_demo1');

  //编辑器外部操作
  var active = {
    content: function(){
      alert(layedit.getContent(index)); //获取编辑器内容
    }
    ,text: function(){
      alert(layedit.getText(index)); //获取编辑器纯文本内容
    }
    ,selection: function(){
      alert(layedit.getSelection(index));
    }
  };

  $('.site-demo-layedit').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

   //常规使用 - 普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '{%url "api:upload" %}' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#showImg').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功的一些操作
      //……
      console.log(res.data.filepath)
      $('#demoText').html(res.data.filepath); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });


    //自定义验证规则
  form.verify({
    password: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ],
    phone: [
      /^[0-9]{11}$/
      ,'手机号必须是11位数字'
    ],
    re_pass: function (value){
        if($('#pwd1').val() !== value){
            return '两次密码不一致';
        }
    }
  });

  laydate.render({
    elem: '#date'
  });
  //监听提交
  form.on('submit(demo1)', function(data){
      // console.log(JSON.stringify(data.field))
      // debugger
      var title = data.field['title']
      // var imgSrc = document.getElementById("demoText").innerText
      var imgSrc = $('#demoText').html()
      var reading = data.field['reading']
      var collection = data.field['collection']
      var author = data.field['author']
      var dateTime = data.field['dateTime']
      var content = layedit.getContent(index)

      var id = data.field['id']

      $.ajax({
        method: "POST",
        url: "{%url 'api:article_edit' %}",
        data: {
        title: title,
        imgSrc: imgSrc,
        reading: reading,
        collection: collection,
        author: author,
        dateTime: dateTime,
        content: content,
        id: id,
        },
        success: function (xxx) {
            if(xxx['code'] == 0){
                layer.msg(xxx['msg']);
                parent.layer.closeAll()
                parent.location.reload();
            }else{
                layer.msg(xxx['msg']);
            }
        }
      });
      return false;
  });
});
</script>
</html>